<template>
  <div class="Con">
    <div class="Login">
      <div class="Login-L">
        <img src="../../assets/img/login.jpg" />
      </div>

      <div class="Login-R">
        <p class="p1">广州城市理工学院计算机实验中心</p>
        <p class="p2">实验室管理系统后台</p>
        <div class="Login-R-C">
          <div style="margin: 20px"></div>

          <el-form label-width="80px">
            <el-form-item label="用户名:" class="input-X">
              <el-input
                prefix-icon="el-icon-user-solid"
                size="small"
                v-model="userName"
              ></el-input>
            </el-form-item>

            <el-form-item label="密码:" class="input-X">
              <el-input
                prefix-icon="el-icon-lock"
                size="small"
                v-model="userPassword"
                type="password"
                id="pwd"
              ></el-input>
            </el-form-item>
          </el-form>

          <div style="width: 100%; text-align: center">
            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              size="small"
              class="button1"
              @click="login()"
              id="sub"
              >登 录</el-button
            >
            <!--按钮-->
          </div>

          <div
            style="
              width: 100%;
              height: 2px;
              background-color: rgb(192, 190, 194);
              margin-top: 30px;
            "
          ></div>

          <p class="p3">注意：* 登录界面没有适配移动端，请老师用电脑使用！</p>
          <p class="p3">
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *
            该系统没有开放注册功能，后台只供实验室管理员使用！
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { axios1 } from "@/network";

export default {
  name: "login",
  data() {
    return {
      userName: "",
      userPassword: "",
    };
  },
  methods: {
    login() {
      if (this.userName == "" || this.userPassword == "") {
        this.$message({
          message: "输入项不可以为空！",
          type: "error",
          duration: 1000,
        });
      } else {
        axios1({
          url: "/web/login",
          method: "post",
          data: {
            account: this.userName,
            password: this.userPassword,
          },
        })
          .then((res) => {
            if (res.data.resultCode == "200") {
              //this.$store.state.token=res.data.data.token
              this.$store.commit("setToken", res.data.data.token);
              console.log(res.data.data.token + "------");
              console.log(this.$store.state.token);
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 1000,
              });
              this.$router.push("/main");
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((res) => {
            this.$message({
              message: res,
              type: "error",
              duration: 2000,
            });
          });
        // this.$router.push('/main');
      }
    },
  },
  mounted() {
    var pwd = document.querySelector("#pwd");
    var sub = document.querySelector("#sub");
    console.log(pwd);
    pwd.addEventListener("keyup", (e) => {
      if (e.key == "Enter") {
        sub.click();
      }
    });
  },
};

// pwd.addEventListener("click", (e) => {
//   console.log(e);
// });
</script>

<style scoped>
.Con {
  width: 100%;
  height: 100%;

  overflow: hidden;
  background-color: rgb(240, 238, 238);
}
.Login {
  width: 70%;

  height: 500px;

  overflow: hidden;
  margin: auto;
  margin-top: 6%;
  min-width: 500px;
  max-width: 1200px;
  overflow-x: auto;

  box-shadow: 1px 1px 15px rgb(65, 65, 65);
}
.Login:hover {
  box-shadow: 1px 1px 15px rgb(0, 0, 0);
}
.Login-L {
  width: 40%;
  height: 100%;
  background-color: rgb(99, 98, 100);
  float: left;
}
.Login-L img {
  width: 100%;
  height: 100%;
}
.Login-R {
  width: 60%;
  height: 100%;

  float: right;

  background-color: #ffffff;
  padding-top: 10px;
}
.Login-R .p1 {
  height: 40px;
  width: 100%;

  text-align: center;
  line-height: 40px;
  font-size: 24px;
  font-weight: 600;
  color: #2b93fa;
}
.Login-R .p2 {
  height: 30px;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #5ea2e7;

  line-height: 30px;
  text-align: center;
}
.Login-R-C {
  width: 100%;
  height: 300px;

  margin: auto;
  overflow: hidden;
  margin-top: 30px;
}
.input-X {
  width: 80%;
  font-size: 18px;
  margin: auto;
  margin-top: 30px;
  font-weight: 700;
}
.button1 {
  width: 24%;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  margin-left: 30px;
}
.p3 {
  font-size: 12px;
  padding-left: 50px;
  color: rgb(248, 110, 110);
  font-weight: 500;
}
</style>
